{% load staticfiles %}
<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>注册</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" title="" rel="stylesheet"/>
    <link title="orange" href="/static/css/login.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="{% static 'gritter/css/jquery.gritter.css' %}"/>
    <script type="text/javascript" src="{% static 'gritter/js/jquery.gritter.js' %}"></script>
</head>

<body onload="get_captcha_img(),clean_captcha()">

<div style="height:1px;"></div>
<div class="login">
    <header>
        <h1>注册</h1>
    </header>
    <div class="sr">
        <form method="post" action="{% url 'reg' %}">
            {% csrf_token %}
            <div class="name">
                <label>
                    <i class="sublist-icon glyphicon glyphicon-user"></i>
                </label>
                <input type="text" placeholder="请输入输入登录名" name="username" class="name_inp" required>
            </div>
            <div class="name">
                <label>
                    <i class="sublist-icon glyphicon glyphicon-envelope"></i>
                </label>
                <input type="email" id="email" placeholder="请输入邮箱" name="email" class="name_inp" required>
            </div>
            <div class="name_check">
                <label>
                    <i class="sublist-icon glyphicon glyphicon-pencil"></i>
                </label>
                <input type="text" id="id_captcha" placeholder="请输入验证码" class="name_inp" name="my_code"
                       onblur="check_captcha()">
                <a id="get_code" href="javascript:void (0)" onclick="get_code()">验证码获取</a>
            </div>
            <div class="name">
                <label>
                    <i class="sublist-icon glyphicon glyphicon-pencil"></i>
                </label>
                <input type="password" placeholder="请输入密码" name="passwd1" class="name_inp" required>
            </div>
            <div class="name">
                <label>
                    <i class="sublist-icon glyphicon glyphicon-pencil"></i>
                </label>
                <input type="password" placeholder="确认密码" name="passwd2" class="name_inp" required>
            </div>
            <input class="dl" type="submit" value="登录">
        </form>
    </div>
</div>
<script>
    function get_code() {
        {#        alert("hello")#}
        var my_code = $("#email").val()
        {#        alert(my_code)#}
        $.ajax({
            url: "{% url 'apis:get_code' %}",
            type: 'POST',
            dataType: 'json',
            data: {
                "my_code": my_code,
            },
            success: function (data) {
{#                alert(data)#}
                $.gritter.add({
                    // (string | mandatory) the heading of the notification
                    title: '获取验证码结果：',
                    // (string | mandatory) the text inside the notification
                    //text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
                    text: data.result
                });
            },
            // 解决csrftoken
            beforeSend: function (xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            }
        })

    }
</script>
</body>
</html>
